<template>
  <div class="content">
    <el-row type="flex" justify="center" :gutter="20">
      <el-col :span="6">
        <el-row style="border-bottom: 1px solid #eeeeee">
          <el-menu :default-active="this.$route.path" router >
            <el-submenu index="1">
              <!-- 一级菜单 -->
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>新闻管理</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item index="/User/NewsManage/NewsInShow"
                >已发表新闻</el-menu-item
              >
              <el-menu-item index="/User/NewsManage/NewsToAudit"
                >待审核新闻</el-menu-item
              >
              <el-menu-item index="/User/NewsManage/Add"
                >写一条新闻</el-menu-item
              >
            </el-submenu>

            <el-submenu index="2">
              <!-- 一级菜单 -->
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>账户管理</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item index="/User/UserManage/ChangeInfo">修改个人信息</el-menu-item>
              <el-menu-item index="/User/UserManage/ChangePassword">修改密码</el-menu-item>
              <el-menu-item index="/User/UserManage/Logout">退出登录</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-row>

        <!-- top10News -->
        <el-row>
          <br /><br />
          <br /><br />
          <top10news :top10News="top10news"></top10news>
        </el-row>
      </el-col>
      <el-col :span="18">
        <el-row>
          <!-- 第三级router view -->
          <router-view></router-view>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.content {
  margin-top: 2%;
}
</style>

<script>
import News from "@/api/News.js";
const news = new News();
import top10news from "../../frontdesk/top10News.vue";
export default {
  data: () => ({
    tab_position: "left",
    top10news: [],
  }),
  components: {
    top10news,
  },
  // computed:{
  //    top10news: async function(){
  //      return (await this.GetTop10News())
  //    }

  // },
  methods: {
    // 获取当前APPUser排名前10新闻,InShow,用于top10news组件
    async GetTop10News() {
      const appUserId = this.$store.state.id;
      const response = await news.GetTopCountNewsByAppUserId(appUserId, 10);
      return response;
    },
  },
  async mounted() {
    this.top10news = await this.GetTop10News();
  },
};
</script>